JavaScript學習日記 : Day29 - import & export - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 29

Modern Web

JavaScript學習日記系列第 29 篇

JavaScript學習日記 : Day29 - import & export

13th鐵人賽

muchen24

團隊ㄟˊ~這是幹嘛的？

2021-10-11 11:42:16

3982 瀏覽

分享至

在開發中，為了避免單一檔案太大，通常會使用模組管理，分拆每個檔案視為獨立的模組，透過import、export匯出匯入來使用。

如果要在瀏覽器運行模組化，需要在script標籤加上type="module":

// index.html

<!doctype html>
<script type="module">
  import {sayHi} from './say.js';

  document.body.innerHTML = sayHi('John');
</script>

// say.js

export function sayHi(user) {
  return `Hello, ${user}!`;
}

// 輸出結果

Hello, John!

use strict

module預設就是use strict:

// index.html
<script type="module">
  a = 123; // error, user is not defined
</script>

模組作用域

每個模組都有自己頂級作用域(top-level scope)，模組各自作用域中的變數、函數彼此是不可取得的:

// cat.js

let name = "white cat"

// jump.js

console.log(`${name} jump!`) // name is not defined

// index.html

<!doctype html>
<script type="module" src="cat.js"></script>
<script type="module" src="jump.js"></script>

如果要在jump.js中取得cat.js中的變數，可以這樣做:

// cat.js

export let name = "white cat"

// jump.js
import { name } from './cat.js'
console.log(`${name} jump!`) // name is not defined

// index.html

<!doctype html>
<script type="module" src="cat.js"></script>
<script type="module" src="jump.js"></script>

export

expert可以匯出值、object、函數、class等等都可以，export分為兩種類型:

named export(具名輸出) : 匯出前給予特定名稱，匯入也使用一樣的名稱，一個module可以有多個named export
default export(預設輸出) : 一個module只能有一個default export，不需要給名稱。

named export

方法一 :
export後面緊接著let、const

export let a = 123;

export let obj = { name : David }

使用as改名:

const obj = { name : "David" }

export {obj as newName};

方法二 :
export後面緊接著函數表達式

export function test() {
  console.log('這是一段函式')
}

方法三 :
定義好所有物件、方法後，將所有統一匯出:

let a = 123;
let obj1 = { name : 'John' };
let func1 = function() { alert('function1') }

export {a, obj1, func1}

default export

匯出時不需要賦予名稱，但是可以在import時給名稱。

// 純值
export default 123

// 匯出objetc
let a = 123;
let obj1 = { name : 'John' };
let func1 = function() { alert('function1') }

export default {a, obj1, func1}

與具名函數不同，可以直接匯出匿名函數與class:

// 匯出匿名函式
export default function() {
  console.log('這是一段函式');
}

// 匯出 class
export default class {
  constructor(name) {
    this.name = name;
  }
  callName() {
    console.log(this.name);
  }
}

import

匯入的方法要視匯出的形式，是named export或default export，或是都有:

匯入default export

// demoModule.js
// export file
export default function() {
  console.log('這是一段函式');
}

//import file

import fnName from './demoModule.js'

fnName();

匯入named export

// demoModule.js
// export file
export const obj = { name: 'John'}; 
export function fn() {
  console.log(`${obj.name} is imported`)
}

// import file
import {obj, fn } from './module.js';
fn(); // John is imported

重新命名

// demoModule.js
// export file
export const obj = { name: 'John'}; 

// import file
import {obj as newNameObject } from './module.js';
fn(); // John is imported

也可以透過*一次匯入全部的具名函數，搭配as指向一個新物件名稱:

// demoModule.js
// export file
export const obj = { name: 'John'}; 
export function fn() {
  console.log(`名為fn的函數`)
}

// import file
import * as demoModule from './module.js';
demoModule.fn(); // 名為fn的函數

同時匯入預設、具名

// demoModule.js
// export file
export const obj = { name : "David"}
export default function() {
    console.log('我是預設匯出函數')
}

// import file
import fnName, * as objName from './demoModule.js'